<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 9/17
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>

    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="static/bootstrapValidator/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/bootstrapValidator/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <!-- form: -->
        <section>
            <div class="col-lg-8 col-lg-offset-2">
                <div class="page-header">
                    <h2>登录</h2>
                </div>

                <form id="defaultForm" method="post" class="form-horizontal" >
                    <div class="alert alert-success" style="display: none;"></div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">用户名</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="userName" placeholder="请输入用户名" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">密码</label>
                        <div class="col-lg-5">
                            <input type="password" class="form-control" name="userPwd" placeholder="请输入密码" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-3 col-lg-4">
                            <a href="register.jsp">注册</a> |
                            <a href="#">忘记密码?</a>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- :form -->
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#defaultForm')
            .bootstrapValidator({
                message: 'This value is not valid',
                //live: 'submitted',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    userName: { //根据name属性值来验证的
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 4,
                                message: '用户至少4位'
                            },
                            /*remote: {
                                url: 'remote.php',
                                message: 'The username is not available'
                            },*/
                            regexp: { //用户名验证规则
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名由数字，字母，下划线或.组成'
                            }
                        }
                    },

                    userPwd: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max:30,
                                message: '密码由6-30位字符组成'
                            }
                        }
                    }
                }
            })
            .on('success.form.bv', function(e) { //当验证通过以后触发表单提交
                // Prevent submit form
                e.preventDefault(); //阻止表单的默认行为
                var $form     = $(e.target); //获取到表单元素dom对象，并转换为jquery对象

                //获取用户名和密码，异步提交到服务器做验证
                var userName = $('input[name="userName"]').val();
                var userPwd = $('input[name="userPwd"]').val();
                //console.log('userName=',userName)
                //console.log('userPwd=',userPwd)

                //console.log($('#defaultForm').serialize())
                
                $.ajax({
                    url:'doLogin', //请求服务器的url地址
                    type:'POST',    //请求方式为POST
                    dataType:'json',    //预期服务器返回的数据类型为json
                    //data:'userName='+userName + '&userPwd = '+ userPwd
                    //data:{'userName':userName,'userPwd':userPwd}
                    data:$('#defaultForm').serialize(),  //序列化表单为字符串，将表单元素序列化为 name=value&name=value的格式
                    beforeSend:function () { //在发起异步请求前触发的函数
                        $form.find('.alert').html('正在登陆，请稍后...').show();
                        console.log('=========beforeSend')
                    },
                    error:function(){   //请求发生错误时调用的回调函数
                        $form.find('.alert').html('发生未知错误，请稍后重试').show();
                        console.log('=========error')
                    },
                    success:function(response){ //请求成功后调用的回调函数，response为服务器响应的数据
                        console.log('=========success')
                        //console.log(response)
                        if(response.code != 200){
                            $form.find('.alert')
                                .removeClass('alert-success') //首先移除掉成功的类
                                .addClass('alert-danger')    //添加失败的类
                                .html(response.message).show()
                        } else { //登录成功
                            console.log(response.data['url'])
                            //跳转页面
                            window.location.href = response.data['url'];
                        }
                    },
                    complete:function(){ //无论请求成功还是失败都会调用的回调函数
                        console.log('=========complete')
                    }
                })

            });
    });
</script>
</body>
</html>
